<template>
    <!--底部提交 -->
    <div class="submit">
        <!-- 传数据时计算属性里拼接好 @submit="onSubmit"-->
        <van-submit-bar :button-text="`${total}`" @submit="onSubmit">
          <div class="fix">
            <input type="checkbox" name="" id="" :checked="isFull" @change="isCheck">
            全选
            <div class="totalPrice">
                <p>合计:</p>
                ￥<span>{{ sum.toFixed(2) }}</span>
            </div>
          </div>
            <p class="delall" @click="delAll" v-if="flagDel">全选删除</p>
        </van-submit-bar>
    </div>
</template>

<script>

export default {

    props: {
        isFull: {
            type: Boolean,
        },
        sum: {
            type: Number,
            default: 0
        },
        total: {
            default: 0
        },
        list: []
    },
    data() {
        return {
            flagDel: false,
            fullState: this.isFull,
            newList:[]
     
        }
    },

    methods: {
        // 全选框改变就把值传给父组件
        isCheck(e) {
            // checked
            this.$emit("isChecked", e.target.checked)
        },

        onSubmit() {
            this.newList = this.list.filter(item => item.flag)
            window.scrollTo({ top: 0 })
                  this.$router.push({
                path: '/order',
                query: {
                    listOrder: JSON.stringify(this.newList)
                }
            })
        },
        async delAll() {
            this.$emit("del", [])
            // this.$refs.ref1.remove()
            // 删除所有数据
            const { data: res } = await this.$http.post('http://118.178.238.19:3001/api/cart/removeall', {
                token: localStorage.getItem("token"),
                userid: 'user_075616fe- 8528 - 43e9 - ba98 - 9dd0c4db8873'

            })
            this.isFull = false

        }

    },
    async mounted() {
        this.$bus.$on('del', (v) => {
            this.flagDel = v
        })
        //查看购物车
        const { data: res } = await this.$http.post('http://118.178.238.19:3001/api/cart/list', {
            token: localStorage.getItem("token"),
            userid: "user_075616fe-8528-43e9-ba98-9dd0c4db8873",
        });

        if (res.data == undefined) {
            this.fullState = false
        }

    },
  
}
</script>

<style scoped>
.van-submit-bar__bar::v-deep span {
    margin-left: .2rem;
}

.submit {
    width: 100%;
    height: 1.36rem;
    font-size: .32rem;
}

.box {
    width: 1.68rem;
}

.totalPrice {
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;

}

.totalPrice>span {
    font-weight: bold;
    color: #F2270C;
}

.van-submit-bar__button {
    width: 2rem;
}

.van-submit-bar {
    bottom: .92rem
}

.van-submit-bar__button--danger {
    background: linear-gradient(90deg, #FF9000 0%, #FF5000 98%);
}

        input[type='checkbox'] {
            cursor: pointer;
            position: relative;
            width: .42rem;
            height: .42rem;
            font-size: .32rem;
            visibility: hidden;
        }
    
        input[type='checkbox']::after {
            position: absolute;
            top: 0;
            left: -0.1rem;
            z-index: 9;
            color: #fff;
            width: .42rem;
            height: .42rem;
            display: inline-block;
            visibility: visible;
            padding-left: 0px;
            text-align: center;
            content: ' ';
            border-radius: 50%;
            border: .02rem solid #999;
        }
    
        input[type='checkbox']:checked::after {
            width: .42rem;
            height: .42rem;
            content: '✓' !important;
            font-size: .32rem;
            font-weight: bold;
            color: #fff;
            background-color: #ff5000;
            border: none
        }
        .delall{
            /* text-align: center;
           
            height: 40px;
            line-height: 40px;
            background: linear-gradient(90deg, #FF9000 0%, #FF5000 98%);
            border-radius: 19.98rem;
            color:#fff */
            width: 1.2rem;
            height: .76rem;
            line-height: .76rem;
            text-align: center;
            border-radius: 19.98rem;
            font-size: .26rem;
            font-weight: bold;
            color: #FC0A0A;
                border: .02rem solid #FC0A0A;
        }
       .fix{
        width: 3.5rem;
        display: flex;
        position: absolute;
        left: .4rem;
       }
        ::v-deep .van-submit-bar__bar span{
            margin-left: 0;
        }
</style>